<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Content Transfer')"></h3>
    </template>
    
    <!-- 上传任务列表 -->
    <el-row :gutter="8">
      <el-col :span="24">
        <div style="text-align: center; margin-bottom: 8px;">
          <h4 v-text="t('Upload Tasks')"></h4>
        </div>
        <el-scrollbar>
          <el-row v-for="(task, index) in contentTransferStore.uploadTasks" :key="task.id">
            <el-col :span="24">
              <el-card shadow="hover">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <div style="flex-grow: 1; margin-right: 8px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px;">
                      <span>{{ task.contentID }}</span>
                      <span>{{ formatBytes(task.payloadByteCount) }}</span>
                      <span>{{ formatTime(task.commitTime) }}</span>
                    </div>
                    <div style="font-size: 12px; margin-bottom: 4px;">{{ task.brief }}</div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-progress 
                        :percentage="task.totalProgress()" 
                        :show-text="false"
                        style="flex-grow: 1;"
                      />
                      <span style="font-size: 12px; min-width: 40px; text-align: right;">{{ task.totalProgress().toFixed(1) }}%</span>
                    </div>
                  </div>
                  <el-button 
                    type="danger" 
                    size="small"
                    circle
                    @click="contentTransferStore.cancelUploadTask(task.guid)"
                    style="width: 24px; height: 24px; padding: 0;"
                  >
                    ×
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-col>
    </el-row>

    <!-- 下载任务列表 -->
    <el-row :gutter="8">
      <el-col :span="24">
        <div style="text-align: center; margin-bottom: 8px;">
          <h4 v-text="t('Download Tasks')"></h4>
        </div>
        <el-scrollbar>
          <el-row v-for="(task, index) in contentTransferStore.downloadTasks" :key="task.id">
            <el-col :span="24">
              <el-card shadow="hover">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <div style="flex-grow: 1; margin-right: 8px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px;">
                      <span>{{ task.contentID }}</span>
                      <span>{{ formatBytes(task.payloadByteCount) }}</span>
                      <span>{{ formatTime(task.commitTime) }}</span>
                    </div>
                    <div style="font-size: 12px; margin-bottom: 4px;">{{ task.brief }}</div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                      <el-progress 
                        :percentage="task.totalProgress()" 
                        :show-text="false"
                        style="flex-grow: 1;"
                      />
                      <span style="font-size: 12px; min-width: 40px; text-align: right;">{{ task.totalProgress().toFixed(1) }}%</span>
                    </div>
                  </div>
                  <el-button 
                    type="danger" 
                    size="small"
                    circle
                    @click="contentTransferStore.cancelDownloadTask(task.guid)"
                    style="width: 24px; height: 24px; padding: 0;"
                  >
                    ×
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-col>
    </el-row>

    <!-- 空闲端口列表 -->
    <el-row :gutter="8">
      <el-col :span="24">
        <div style="text-align: center; margin-bottom: 8px;">
          <h4 v-text="t('Idle Ports')"></h4>
        </div>
        <el-scrollbar>
          <el-row v-for="(port, index) in contentTransferStore.idlePorts" :key="port">
            <el-col :span="24">
              <el-card shadow="hover">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <span>{{ port }}</span>
                  <el-button 
                    type="danger" 
                    size="small"
                    circle
                    @click="contentTransferStore.removeIdlePort(port)"
                    style="width: 24px; height: 24px; padding: 0;"
                  >
                    ×
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { useContentTransferPanelStore } from '@/stores/contentTransferPanel'
import { useLanguageStore } from '@/stores/language'

const contentTransferStore = useContentTransferPanelStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Content Transfer': {
      'en': 'Content Transfer',
      'zh': '内容传输'
    },
    'Upload Tasks': {
      'en': 'Upload Tasks',
      'zh': '上传任务'
    },
    'Download Tasks': {
      'en': 'Download Tasks',
      'zh': '下载任务'
    },
    'Idle Ports': {
      'en': 'Idle Ports',
      'zh': '空闲端口'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 格式化时间
const formatTime = (date) => {
  if (!date) return '---'
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}/${month}/${day} ${hour}:${minute}:${second}`
}

// 格式化字节数
const formatBytes = (bytes) => {
  if (!bytes || bytes === 0) return '(---)'
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return '(' + Math.round(bytes / Math.pow(1024, i) * 100) / 100 + sizes[i] + ')'
}
</script>
